<template>
  <section class="app-container">
    <div class="app-container__body">
        <el-form ref="indexForm"  label-width="125px" v-loading="loading" >
          <el-row class="createPost-main-container">
            <el-form-item label="出版社名称:" required :class="{error: validation.hasError('indexForm.publishingName')}">
              <el-input v-model="indexForm.publishingName" style="width:300px;" placeholder="请输入出版社名称"></el-input>
              <span class="v-message">{{ validation.firstError('indexForm.publishingName') }}</span>
            </el-form-item>
            <el-form-item label="联系人手机号:" required :class="{error: validation.hasError('indexForm.phone')}">
              <el-input v-model="indexForm.phone" style="width:300px;" placeholder="请输入联系人手机号"></el-input>
              <span class="default_tips">作为登录账号使用</span>
              <span class="v-message">{{ validation.firstError('indexForm.phone') }}</span>
            </el-form-item>
            <el-form-item label="联系人邮箱:" required :class="{error: validation.hasError('indexForm.email')}">
              <el-input  v-model="indexForm.email" style="width:300px;" placeholder="请输入联系人邮箱"></el-input>
              <span class="v-message">{{ validation.firstError('indexForm.email') }}</span>
            </el-form-item>
            <el-form-item label="联系人姓名:" required :class="{error: validation.hasError('indexForm.name')}">
              <el-input v-model="indexForm.name" style="width:300px;" placeholder="请输入联系人姓名"></el-input>
              <span class="v-message">{{ validation.firstError('indexForm.name') }}</span>
            </el-form-item>
            <el-form-item label="密码:"  :class="{error: validation.hasError('indexForm.password')}" v-if="params.id == 0">
              <el-input type="password" v-model="indexForm.password" style="width:300px;" placeholder="6-16位数字字母组合"></el-input>
              <span class="default_tips">不填写默认密码为dd111111</span>
              <span class="v-message">{{ validation.firstError('indexForm.password') }}</span>
            </el-form-item>
            <el-form-item label="">
              <el-button v-loading="isSubmitLoading" type="cyan" @click="submit">保存 </el-button>
            </el-form-item>
          </el-row>
        </el-form>
    </div>
  </section>
</template>
<script>

  import {saveIndex,indexDetail} from "../../api/index";

  export default {
    name:"indexDetail",

    data() {
      return{
        pageTitle: '新建账号',
        loading: false,
        isSubmitLoading: false,
        indexForm: {
          publishingName:"",
          name:"",
          phone:"",
          email:"",
          password:"",
        },
        params:{
          id:0
        }
      }
    },
    validators: {
      'indexForm.publishingName': function(value) {
        return this.validator.value(value).required('请填写出版社名称');
      },
      'indexForm.name': function(value) {
        return this.validator.value(value).required('请填写联系人姓名');
      },
      'indexForm.phone': function(value) {
        return this.validator.value(value).required('请填写联系人手机号').regex('^1[34578]\\d{9}$', '请填写正确的手机号格式');
      },
      'indexForm.email': function(value) {
        return this.validator.value(value).required('请填写联系人邮箱').email("请填写正确的邮箱格式");
      },
      'indexForm.password': function(value) {
        return this.validator.value(value).regex('^[a-zA-Z0-9]{6,16}$','请输入6到16位字母或数字');
      },
    },
    methods: {
      submit() {
        let valids = undefined;
        if(this.params.id != 0){
           valids = ['indexForm.publishingName','indexForm.name','indexForm.phone','indexForm.email'];
        }
        this.$validate(valids).then(async function (success) {
          if(success){
            let resp = await saveIndex(this.indexForm)
            if(this.qUtil.validResp(resp)) {
              this.$store.dispatch('delCurrentViews',{
                view: this.$route,
                $router: this.$router
              })
            }else{
              this.$message({message:resp.msg,type:"warning"});
            }
          }
        }.bind(this))
      },
      async loadData(){
        if(this.params.id ==0) return false;
        let resp =await indexDetail(this.params);
        if(this.qUtil.validResp(resp)){
          this.indexForm = resp.data.adminUser;
          this.indexForm.publishingName = resp.data.adminUser.publishing.name;
        }
      }
    },
    mounted() {
        this.params.id = this.$route.query.id || 0;
        this.loadData();

    }
  }
</script>
